<template>
  <!-- 登录页 -->
  <div class="login">
    <div class="box">
      <div class="login_title">开启移动塑料智能工作台</div>
      <div class="login_box">
        <div class="login_left">
          <div class="login_left_text">
            解决塑料生意难点<br />推动销售业绩增长
          </div>
        </div>
        <div class="login_right">
          <div class="login_right_title">优塑宝</div>
          <div class="login_right_text">用户操作系统</div>
          <div class="login_tab">
            <div
              class="login_tab_box"
              :style="{
                'border-bottom': tabChange
                  ? '#F42551 solid 4px'
                  : '#FFFFFF solid 4px',
                color: tabChange ? '#F42551' : '#333333',
              }"
            >
              {{ obj[$route.path] }}
            </div>
          </div>
          <div class="form-register">
            <div class="login_input">
              <el-input
                placeholder="请输入手机号"
                v-model="userName"
                class="login_el_input"
              ></el-input>
            </div>
            <div class="login_input">
              <el-input
                placeholder="请输入验证码"
                v-model="code"
                class="login_el_input"
              ></el-input>
              <div
                v-if="time == 0"
                class="getCode codeHover"
                @click="$noMultipleClicks(getSmsCodeByAliyun)"
              >
                获取验证码
              </div>
              <div v-else class="getCode">{{ time }}s后可重发</div>
            </div>
            <div class="login_input">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="password"
                class="login_el_input"
              ></el-input>
            </div>
            <div class="login_input">
              <el-input
                type="password"
                placeholder="请重复输入密码"
                v-model="two_password"
                class="login_el_input"
              ></el-input>
            </div>
            <div class="login_btn">
              <button class="btn" @click="toLogin">
                {{ $route.path == "/register" ? "注册并登录" : "确认修改" }}
              </button>
            </div>
            <div class="register">
              <div class="register-codeLogin">
                <div @click="jumpLogin(0)">
                  {{ $route.path == "/register" ? "用户登录" : "免费注册" }}
                </div>
                <div @click="jumpLogin(1)">扫码登陆</div>
              </div>
            </div>
            <div class="privacyAgreement" v-if="$route.path == '/register'">
              <img
                @click="chooseAgreement = false"
                v-if="chooseAgreement"
                class="btn_dl_sel"
                src="../../assets/login/btn_dl_sel@2x.png"
                alt=""
              />
              <img
                @click="chooseAgreement = true"
                v-else
                class="btn_dl_sel"
                src="../../assets/login/btn_dl_nor@2x.png"
                alt=""
              />
              <div class="text">
                勾选则代表您同意<span class="deal" @click="openDel = true"
                  >《优塑宝用户服务协议》</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务协议 -->
    <el-dialog
      title="优塑宝网用户协议"
      :visible.sync="openDel"
      width="5.71rem"
      center
      class="openDialog button"
    >
      <div class="content" v-if="serviceContent" v-html="serviceContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openDel = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import wxlogin from "vue-wxlogin";
export default {
  components: {
    wxlogin,
  },
  created() {
    this.serviceItem();
    // let timestamp = sessionStorage.getItem("timestamp");
    // console.log(Date.now() - timestamp < 60 * 1000);
    // if (Date.now() - timestamp < 60 * 1000) {
    //   this.time = 60 - parseInt((Date.now() - timestamp) / 1000);
    //   this.setCodeTimer();
    // }
    this.$getCodeTimer()
  },
  data() {
    return {
      userName: "",
      code: "",
      password: "",
      two_password: "",
      tabChange: true,
      time: 0,
      openDel: false,
      obj: {
        "/resetPassword": "忘记密码",
        "/register": "注册",
      },
      chooseAgreement: false,
      serviceContent: "",
      noClick: true,
    };
  },
  methods: {
    // 注册--服务协议
    async serviceItem() {
      let res = await this.$apiFun.serviceItem();
      this.serviceContent = res.result.userAgreement;
    },

    // setCodeTimer() {
    //   if (this.time == 0) {
    //     sessionStorage.setItem("timestamp", Date.now());
    //     this.time = 60;
    //   }

    //   let timer = setInterval(() => {
    //     this.time -= 1;
    //     if (this.time <= 0) {
    //       clearInterval(timer);
    //     }
    //   }, 1000);
    // },
    async getSmsCodeByAliyun() {
      if (this.userName == "") {
        this.$message.error("手机号不能为空");
      } else {
        let res = await this.$apiFun.getSmsCodeByAliyun({
          mobile: this.userName,
        });
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "获取成功",
          });
          this.$setCodeTimer();
        } else {
          this.$message({
            type: "error",
            duration: 1500,
            message: "获取失败",
          });
        }
      }
    },
    jumpLogin(type) {
      if (type == 0) {
        if (this.$route.path == "/register") {
          // 注册页跳登录页
          this.$router.replace({
            name: "login",
            params: { type: 0 },
          });
        } else {
          // 修改密码页跳登录页
          this.$router.replace({
            name: "register",
          });
        }
      } else {
        // 修改密码页跳扫码登录页
        this.$router.replace({
          name: "login",
          params: { type: 1 },
        });
      }
    },
    async toLogin() {
      let message = "";
      if (this.userName == "") {
        message = "手机号不能为空";
      } else if (!/^1[3456789]\d{9}$/.test(this.userName)) {
        message = "请输入正确的手机号";
      } else if (this.code == "") {
        message = "验证码不能为空";
      } else if (this.code.length !== 6) {
        message = "请输入六位的验证码";
      } else if (this.password == "") {
        message = "密码不能为空";
      } else if (this.two_password == "") {
        message = "确认密码不能为空";
      } else if (this.password !== this.two_password) {
        message = "两次输入的密码不一致";
      } else {
        let res;
        if (this.$route.path == "/register") {
          if (!this.chooseAgreement) {
            this.$message.error("请勾选服务协议");
          } else {
            res = await this.$apiFun.register({
              loginName: this.userName,
              loginPwd: this.password,
              mobile: this.userName,
              code: this.code,
            });
          }
          // 注册
        } else {
          // 修改密码
          res = await this.$apiFun.resetPwd({
            loginName: this.userName,
            newPwd: this.password,
            code: this.code,
          });
        }

        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: `${
              this.$route.path == "/register" ? "注册成功" : "修改成功"
            }`,
          });
          if (this.$route.path == "/register") {
            this.login();
          } else {
            this.$router.push("./login");
          }
        } 
        // else {
          // this.$message({
          //   type: "error",
          //   duration: 1500,
          //   message: res.message,
          // });
        // }
      }

      if (message) {
        // this.$message({
        //   type: "error",
        //   duration: 1500,
        //   message,
        // });
      }
    },
    async login() {
      let res = await this.$apiFun.toLogin({
        loginName: this.userName,
        loginPwd: this.password,
      });
      this.$cookies.set("you_su_bao", res.result.token);
      this.$router.push("home");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  font-family: Microsoft YaHei;
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: center;
    .el-dialog__title {
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .content{
    font-size: 0.2rem;
    color: #333333;
  }
  img{
    width: 100%;
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}
.login {
  width: 100vw;
  height: 100vh;
  background: #efefef;
  .box {
    width: 12.9725rem;
    height: 6.0718rem;
    padding: 1.5rem 1rem 0.8rem 0.8rem;
    // width: 75%;
    // height: 66%;
    // padding: 150px 100px 80px 80px;
    background: url(../../assets/login/shadow_dl@2x.png);
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .login_title {
      text-align: left;
      // font-size: 48px;
      font-size: 0.48rem;
      font-weight: bold;
      color: #333333;
    }
    .login_box {
      width: 100%;
      height: 100%;
      display: flex;
      .login_left {
        // width: 50%;
        // height: 90%;
        width: 7.1362rem;
        height: 5.465rem;
        background: url(../../assets/login/pic_dl@2x.png);
        background-size: 100% 100%;
        position: relative;
        .login_left_text {
          position: absolute;
          top: 0.25rem;
          left: 0px;
          line-height: 0.48rem;
          font-size: 0.32rem;
          // top: 25px;
          // left: 0px;
          // font-size: 32px;
          // line-height: 48px;
          font-weight: 300;
          color: #333333;
        }
      }
      .login_right {
        flex: 1;
        // padding-top: 15px;
        padding-top: 0.05rem;

        .login_right_title {
          // font-size: 59px;
          font-size: 0.59rem;
          font-weight: normal;
          color: #333333;
          font-family: FANGZHENGDABIAOSONGJIANTI;
        }
        .login_right_text {
          // font-size: 16px;
          font-size: 0.16rem;
          font-weight: 400;
          color: #333333;
        }
        .login_tab {
          // margin-top: 20px;
          margin-top: 0.2rem;
          display: flex;
          justify-content: center;
          .login_tab_box {
            // height: 35px;
            // width: 400px;
            // font-size: 22px;
            height: 0.35rem;
            width: 4rem;
            font-size: 0.22rem;
            font-weight: bold;
            cursor: pointer;
          }
        }
        .login_input {
          position: relative;
          // width: 400px;
          // margin-top: 20px;
          width: 4rem;
          margin-top: 0.2rem;
          .login_el_input {
            // width: 400px;
            width: 4rem;
            height: 0.4rem;
            margin: 0 auto;
            display: block;
          }
        }
        .login_remember {
          display: flex;
          justify-content: space-between;
          // margin: 20px auto;
          // width: 400px;
          margin: 0.2rem auto;
          width: 4rem;
          span {
            // font-size: 16px;
            font-size: 0.16rem;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
          }
          .login_remember_left {
            display: flex;
            align-content: center;
            img {
              // width: 20px;
              // height: 20px;
              width: 0.2rem;
              height: 0.2rem;
              cursor: pointer;
            }
            span {
              // margin-left: 9px;
              // font-size: 16px;
              margin-left: 0.09rem;
              font-size: 0.16rem;
            }
          }
        }
        .login_btn {
          height: 0.5rem;
          padding-top: 0.1rem;
          .btn {
            margin-top: 10px;
            // width: 400px;
            // height: 40px;
            // line-height: 40px;
            width: 4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            background: #f42551;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            border: none;
            cursor: pointer;
            display: block;
          }
        }
        .register {
          display: flex;
          justify-content: center;
          // margin-top: 20px;
          // font-size: 16px;
          margin-top: 0.2rem;
          font-size: 0.16rem;
          font-weight: 400;
          color: #f42551;
          cursor: pointer;
          .register-codeLogin {
            // width: 400px;
            width: 4rem;
            display: flex;
            justify-content: space-between;
          }
        }
        #wx_login {
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}
.form-register {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.getCode {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.2rem;
  font-size: 0.16rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
}
.codeHover:hover {
  text-decoration: underline;
}

// 服务协议
.privacyAgreement {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  .btn_dl_sel {
    width: 0.16rem;
    height: 0.16rem;
  }
  .text {
    font-size: 0.14rem;
    font-weight: 400;
    color: #333333;
    margin-left: 0.1rem;
    .deal:hover {
      color: #f42551;
      cursor: pointer;
    }
  }
}


</style>